<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bone</title>

    <!-- load 依赖的库 -->
    <script src="../libs/system.js"></script>
    <script>
        System.import('../libs/cc.js');
    </script>

    <!-- load 一些工具函数 -->
    <script src="../src/utils/gltfParser.js"></script>
    <script src="../src/utils/ajax.js"></script>
    <script src="../src/utils/globalCache.js"></script>

    <!-- load需要的 -->
    <script src="../src/debugUtils.js"></script>
    <!--<script src="../src/graphics.js"></script>-->
    <!--<script src="../src/v1/camera.js"></script>-->
    <!--<script src="../src/v1/rendererV1.js"></script>-->
    <!--<script src="../src/v1/mesh.js"></script>-->

    <script src="../src/v1/g2d.js"></script>
    <script src="../src/v1/template_2d.js"></script>

    <script>

        let boneId = function () {
            let _bid = 1;
            return function () {
                return _bid++;
            }
        }();

        // 手动定义一些个bone
        class Bone2{
            constructor(x = 0,y = 0){
                this.x = x; //  父节点中的位置
                this.y = y;
                this.angle = 0; // 表示绕父节点旋转的角度
                this.children = [];
                this.parent = null;
                this.name = 'bone_' + boneId();

                this.joints = []; // 关节,可以进行绑定,方向从当前节点指向其子节点
            }

            add(bone){
                if(bone.parent){
                    throw new Error('bone 已经有了父节点');
                }
                let idx = this.children.indexOf(bone);
                if(idx >= 0){
                    throw new Error('已经包含了此节点');
                }

                this.children.push(bone);
                bone.parent = this;
            }
        }



        let g2d;
        let rootBone;
        let cx,cy;
        app.init = function () {

            cx = app.width/2;
            cy = app.height/2;

            g2d = new Graphics2d(__imageData);
            rootBone = new Bone2(cx,cy);

            // 下
            let b1 = new Bone2(0,-30);
            rootBone.add(b1);

            let b3 = new Bone2(-20,-20);
            b1.add(b3);
            let b4 = new Bone2(20,-20);
            b1.add(b4);

            let b7 = new Bone2(0,-30);
            b3.add(b7);
            let b8 = new Bone2(0,-30);
            b4.add(b8);

            //  上
            let b2 = new Bone2(0,30);
            rootBone.add(b2);

            let b5 = new Bone2(-40,0);
            b2.add(b5);
            let b6 = new Bone2(40,0);
            b2.add(b6);

            let b11 = new Bone2(0,30);
            b2.add(b11);
            let b12 = new Bone2(0,30);
            b11.add(b12);

            let b9 = new Bone2(-40,0);
            b5.add(b9);
            let b10 = new Bone2(40,0);
            b6.add(b10);

        };
        app.render = function () {
            g2d.clear();
            draw_root_bone(rootBone);
        };


        const HSIZE = 2;
        function draw_root_bone(rootBone) {
            _drawBone(rootBone,0,0);
        }

        function _drawBone(bone,px,py){
            let world_x = bone.x + px;
            let world_y = bone.y + py;

            // 先绘制自己,再绘制子节点
            g2d.drawRect(world_x - HSIZE,world_y - HSIZE,HSIZE * 2,HSIZE * 2,cc.Color.GREEN);

            bone.children.forEach(b=>{
               _drawBone(b,world_x,world_y);
               g2d.drawArrow(world_x,world_y,world_x + b.x,world_y + b.y,cc.Color.RED);
            });
        }
    </script>

</head>
<body>

</body>
</html>
